<template>
  <div class="root">

    <el-form :model="data" label-width="120px" class="demo-ruleForm">

        <el-form-item label="旧密码：" :rules="[
          {
            required: true,
            message: '请输入旧密码',
            trigger: 'blur',
          },]">
          <el-input class="input" v-model="data.oldpass" />
        </el-form-item>

        <el-form-item label="新密码：" :rules="[
          {
            required: true,
            message: '请输入新密码',
            trigger: 'blur',
          },]">
          <el-input class="input" v-model="data.pass" />
        </el-form-item>

        <el-form-item label="确认新密码：" :rules="[
          {
            required: true,
            message: '请确认新密码',
            trigger: 'blur',
          },]">
          <el-input class="input" v-model="pass2" />
        </el-form-item>

        <el-form-item>

          <el-button type="primary" @click="amend_pass">修改密码</el-button>
          <el-button @click="reset_pass">重置</el-button>

        </el-form-item>

    </el-form>
    
  </div>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue';
import {student_changepass} from '../../api/test' //接口
import { ElMessage } from 'element-plus';


// 确认新密码
let pass2 = ref('')

// 修改密码

let data = reactive({
  oldpass:'',
  pass:''
}) //参数

let amend_pass = async() => {
  if(data.pass===pass2.value){
    let res: any = await student_changepass(data)
    console.log(res);
    if (res.errCode === 10000) {
      ElMessage({
        message: '修改成功',
        type: 'success',
      });
    } else {
      ElMessage({
        message: '旧密码错误',
        type: 'error',
      });
    }
  }else{
    ElMessage({
        message: '新密码不一致',
        type: 'error',
      });
  }
}


// 重置
let reset_pass = () => {
  data.oldpass = ''
  data.pass = ''
  pass2.value = ''
}

</script>

<style scoped lang='less'>
.root{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 60px;
}
.input{
  width: 230px;
  height: 30px;
}

</style>